<template>
  <div id="mjBox" class="centerItem" ref="dom"></div>
</template>

<script>
  import echarts from 'echarts';
  import tdTheme from './theme.json';
  import {on, off} from '@/base/util/tools'

  echarts.registerTheme('tdTheme', tdTheme);
  export default {
    name: 'Area',
    props: {
      value: Object,
      text: String,
      subtext: String,
      xSleep: Array,
      ySleep: Array
    },
    data() {
      return {
        dom: null
      };
    },
    methods: {
      resize() {
        this.dom.resize();
      },
      drawbarChart() {
        // 指定相关的配置项和数据
        var mjBoxOption = {
          color: ['#289df5', '#fbc01b', '#ff5050'],
          grid: {
            left: 24,
            right: '6%',
            top: '20px',
            bottom: '30',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            position: 'top',
            axisLine: {
              show: false
            },
            axisTick: {
              length: 0
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#051d5f'],
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              // interval: Math.ceil(this.xSleep.length/6),
              interval: 'auto',
              textStyle: {
                color: '#00c5d7'
              }
            },
            //   name: "(月)",
            nameTextStyle: {
              padding: [24, 0, 0, 0],
              color: '#00c5d7'
            },
            nameGap: 0,
            data: this.xSleep
          },
          yAxis: {
            type: 'value',
            inverse: true,
            max: 4,
            splitNumber: 4,
            axisLine: {
              show: false
            },
            axisTick: {
              length: 0 // 刻度线的长度
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: ['#051d5f'],
                width: 1,
                type: 'solid'
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: function (params, index) {
                  let colorList = [
                    '',
                    'rgba(4, 172, 105, 1)',
                    'rgba(11, 193, 226, 1)',
                    'rgba(12, 141, 215, 1)',
                    'rgba(22, 73, 164, 1)'
                  ];
                  return colorList[index];
                }
              },
              // 这里重新定义就可以
              formatter: function (value) {
                var texts = [];
                if (value === 0 || value === '0') {
                  texts.push('');
                } else if (value === 1 || value === '1') {
                  texts.push('清醒');
                } else if (value === 2 || value === '2') {
                  texts.push('浅睡');
                } else if (value === 3 || value === '3') {
                  texts.push('中睡');
                } else if (value === 4 || value === '4') {
                  texts.push('深睡');
                }
                return texts;
              }
            }
          },
          series: [
            {
              name: '吃饭',
              type: 'line',
              smooth: true,
              symbol: 'circle', // 拐点类型
              symbolSize: 0, // 拐点圆的大小
              itemStyle: {
                normal: {
                  color: '#289df5', // 折线条的颜色
                  borderColor: '#289df5', // 拐点边框颜色
                  areaStyle: {
                    type: 'default',
                    opacity: 0.1
                  }
                }
              },
              data: this.ySleep
            }
          ]
        };
        // // 基于准备好的dom，初始化echarts实例
        // var mjBoxEchart = echarts.init(document.getElementById('mjBox'));
        // // 使用制定的配置项和数据显示图表
        // mjBoxEchart.setOption(mjBoxOption);
        // // echart图表自适应
        // window.addEventListener('resize', function () {
        //   mjBoxEchart.resize();
        // });
        this.dom = echarts.init(this.$refs.dom, 'tdTheme');
        this.dom.setOption(mjBoxOption);
        on(window, 'resize', this.resize)
      }
    },
    watch: {
      xSleep() {
        this.drawbarChart();
      },
      ySleep() {
        this.drawbarChart();
      }
    },
    mounted() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.drawbarChart();
        })
      });
    },
    beforeDestroy() {
    }
  };
</script>
